import { Fragment} from "react"
import { Button,Input,Form,DatePicker, Space,Table,Select  } from 'antd';
import type { DatePickerProps } from 'antd';
import { createFromIconfontCN } from '@ant-design/icons';
import type { ColumnsType, TableProps } from 'antd/es/table';
import "./index.css"
// 自定义 font 图标
const MyIcon = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/c/font_3605787_uurxdq31lvi.js', // 在 iconfont.cn 上生成
});
// 时间
const onChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
};
//   表格数据
interface DataType {
    key: React.Key;
    name: string;
    chinese: number;
    math: number;
    english: number;
  }
  
  const columns: ColumnsType<DataType> = [
    {
      title: '订单编号',
      dataIndex: 'name',
      sorter: (a, b) => a.name.length - b.name.length,
      sortDirections: ['descend'],
    },
    {
        title: '产品名称',
        dataIndex: 'name',
    },
    {
        title: '交易金额',
        dataIndex: 'name',
    },
    {
        title: '退款金额',
        dataIndex: 'name',
    },
    {
      title: '交易时间',
      dataIndex: 'chinese',
      sorter: {
        compare: (a, b) => a.chinese - b.chinese,
        multiple: 3,
      },
    },
    {
      title: '退款数量',
      dataIndex: 'math',
      sorter: {
        compare: (a, b) => a.math - b.math,
        multiple: 2,
      },
    },
    {
      title: '状态',
      dataIndex: 'english',
      sorter: {
        compare: (a, b) => a.english - b.english,
        multiple: 1,
      },
    },
    {
        title: '说明',
        dataIndex: 'name',
    },
    {
        title: '操作',
        align:'center',
        render(){
            return(
              <div className="action_button">
                <Button type="primary">退款</Button>
                <Button type="primary" icon={<MyIcon type="icon-mulu"/>}/>
                <Button type="primary" danger icon={<MyIcon type="icon-shanchu"/>}/>
              </div>
            )
        }
    },
  ];
  
  const data: DataType[] = [
    {
      key: '1',
      name: 'John Brown',
      chinese: 98,
      math: 60,
      english: 70,
    },
    {
      key: '2',
      name: 'Jim Green',
      chinese: 98,
      math: 66,
      english: 89,
    },
    {
      key: '3',
      name: 'Joe Black',
      chinese: 98,
      math: 90,
      english: 70,
    },
    {
      key: '4',
      name: 'Jim Red',
      chinese: 88,
      math: 99,
      english: 89,
    },
  ];
  //
  const onChange2: TableProps<DataType>['onChange'] = (pagination, filters, sorter, extra) => {
    console.log('params', pagination, filters, sorter, extra);
  };
  // 
  // rowSelection object indicates the need for row selection
const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record: DataType) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };
// select选择器
const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
const Refound =()=>{ 
    return(
        <Fragment>
            <div className="top">
                <Form>
                    <Form.Item label="产品名称">
                        <Input placeholder="输入产品名称"/>
                    </Form.Item>
                    <Form.Item label="添加时间：">
                        <Space direction="vertical">
                            {/* <DatePicker onChange={onChange} placeholder="请选择时间"/>                 */}
                        </Space>
                    </Form.Item>
                    <Button type="primary" icon={<MyIcon type="icon-sousuo1"/>}>查询</Button>   
                </Form>
            </div>
            <div className="button">
                <Button type="primary" icon={<MyIcon type="icon-right-1"/>}>已退订单</Button>
                <Button type="primary" icon={<MyIcon type="icon-mulu-"/>}>未退订单</Button>
                <Button type="primary" danger icon={<MyIcon type="icon-shanchu"/>}>批量删除</Button>
            </div>
            <div className="table">
                <div className="table_top">
                    <div>
                        每页显示&nbsp;&nbsp;
                        <Select
                            defaultValue="lucy"
                            style={{ width: 120 }}
                            onChange={handleChange}
                            options={[
                                {
                                value: 'jack',
                                label: 'Jack',
                                },
                                {
                                value: 'lucy',
                                label: 'Lucy',
                                },
                                {
                                value: 'disabled',
                                disabled: true,
                                label: 'Disabled',
                                },
                                {
                                value: 'Yiminghe',
                                label: 'yiminghe',
                                },
                            ]}
                        />
                    </div>
                        <Form>
                            <Input placeholder="输入关键字搜索"/>
                        </Form>
                </div>
                <Table 
                rowSelection={{ 
                    ...rowSelection,
                }}
                columns={columns} 
                dataSource={data} 
                onChange={onChange2}
                bordered
                     />
            </div>
        </Fragment>
    )
}
export default Refound